<template>
  <div class="header">
    <div class="top">
      <ul class="left">
        <li @click="goIndex">首页</li>
        <li>优购选</li>
        <li>企业购</li>
        <li>Select Regin</li>
      </ul>
      <ul class="right">
        <li class="rightFirst" v-if="isLogin">
          <span>{{welcome}}</span>
          <span @click="goLogout">退出登录</span>
        </li>
        <li class="rightFirst" v-else>
          <span @click="goLogin(1)">请登录</span>
          <span @click="goLogin(0)">注册</span>
        </li>
        <li @click="goMyOrder">我的订单</li>
        <li>网站导航</li>
        <li @click="goCart">
          <i class="el-icon-shopping-cart-1 icon"></i>
          购物车({{goods.length}})
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex';
import { getCart } from '@/assets/request.js';
export default {
  name: "NavHeader",
  data() {
    return {
      goods: [],
    };

  },
  computed: {
    // 拿vuex的欢迎词
    ...mapGetters('user', ['welcome']),
    // 拿用户是否登录的判断标志位
    ...mapState('user', ['isLogin']),
  },
  methods: {
    // 退出登录方法
    ...mapMutations('user', ['logout']),
    // 去登录页面
    goLogin(n) {
      this.$router.push({
        name: "login",
        params: {
          n
        }
      })
    },
    // 退出登录
    goLogout() {
      this.logout()
    },
    // 去首页
    goIndex() {
      this.$router.push({
        name: "index",
      })
    },
    // 去购物车页面
    goCart() {
      this.$router.push({
        name: "cart",
      })
    },
    // 去订单页
    goMyOrder() {
      this.$router.push({
        name: "myorder",
      })
    },

  },
  async mounted() {
  
      let goodRes = await getCart({
        project_id: 255,
      })
      this.goods = goodRes.data.result
    }
    // console.log(this.goods);
}

</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.header {
  width: 100%;
  height: vw(36);
  color: rgb(158, 151, 151);

  .top {
    width: 100%;
    height: vw(40);
    background-color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      margin-left: vw(75);
      display: flex;

      li {
        padding: 0 vw(10);
        border-right: 1px solid rgb(158, 151, 151);
        cursor: pointer;

        &:hover {
          color: #fff;
        }
      }

      li:last-child {
        border: none,
      }
    }

    .right {
      padding: 0 vw(10);
      margin-right: vw(65);
      display: flex;

      .rightFirst {
        span:first-child {
          padding-right: vw(10);
        }

        span:nth-child(2) {
          padding-left: vw(10);
          border-left: 1px solid rgb(158, 151, 151);
        }

        span:hover {
          color: #fff;
        }
      }

      li {
        padding: 0 vw(10);
        border-right: 1px solid rgb(158, 151, 151);
        cursor: pointer;

        i {
          font-size: vw(16);
        }

        &:hover {
          color: #fff;
        }
      }

      li:first-child:hover {
        color: rgb(158, 151, 151);
      }

      li:last-child {
        border: none,
      }
    }
  }


}
</style>
